<template>
  <div id="login-main">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span style="font-weight: bolder;color: #2155c2">重置密码</span>
        </div>
      </template>


      <el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px"  style="width: 300px">

        <el-form-item label="电话号" prop="newPhone">
          <el-input type="phone"  v-model="resetForm.newPhone" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="newP">
          <el-input type="password" show-password v-model="resetForm.newP" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="newPP">
          <el-input type="password" show-password v-model="resetForm.newPP" auto-complete="off"></el-input>
        </el-form-item>

        <div class="btn-sub">
          <el-button type="primary" @click="resetPassword()">重置密码</el-button>
          <el-button type="primary" @click="backlogin()">返回</el-button>
        </div>


      </el-form>



    </el-card>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "changerPassword",
  data() {
    var validateoldPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话'));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入新密码'));
      } else if (value.toString().length < 6 || value.toString().length > 18) {
        callback(new Error('密码长度为6 - 18个字符'))
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.resetForm.newP) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      resetForm: {
        username: '',
        oldP: '',
        newP: '',
        newPP: '',
        userid: '156854656',
        newPhone: '',
        newQuestion: '',
        newAnswer: '',
      },
      resetFormRules: {
        username: [{required: true, validator: validateoldPass, trigger: 'blur'}],
        newP: [{required: true, validator: validatePass, trigger: 'blur'}],
        newPP: [{required: true, validator: validatePass2, trigger: 'blur'}],
        phone: [{required: true, trigger: 'blur'}],
        question: [{required: true, trigger: 'blur'}],
        answer: [{required: true, trigger: 'blur'}],
      },

    }
  },
  methods: {
    backlogin(){
      this.$router.push("/login")
    },
    resetPassword(){
      //提交修改后的密码
      this.$http.post("user/resetPassword", this.resetForm).then(res => {
        if (res.statusCode == '200') {
          ElMessage({
            message: '修改成功！请重新登录！',
            type: 'success',
          })
          this.$router.push("/login")
        } else {
          ElMessage.error('修改失败！')
        }
      }).catch(() => {
        ElMessage.error('修改失败！')
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 480px;
  margin-left: 0px;
  height: 100%;
}
</style>
